import React, { useEffect, useState } from "react";
import "./index.css";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import {
    fetchCategories,
    selectCategory,
} from "../../store/slices/categoriesSlice";
import { fetchProducts } from "../../store/slices/productsSlice";
import { Image } from "antd-mobile";
export default function CategoryPage() {
    const dispatch = useDispatch();
    const { categories, selectedCategoryId } = useSelector(
        (state) => state.categories
    );
    const navigate = useNavigate();
    const rightScrollRef = React.useRef(null);
    const { allProducts } = useSelector((state) => state.products);
    const handleCategoryClick = (categoryId) => {
        dispatch(selectCategory(categoryId));
        const categoryElement = rightScrollRef.current.querySelector(
            '[data-category-id="' + categoryId + '"]'
        );
        if (categoryElement) {
            categoryElement.scrollIntoView({ behavior: "smooth" });
        }
    };
    const handleRightScroll = (event) => {
        rightScrollRef.current
            .querySelectorAll(".category-section-title")
            .forEach((title) => {
                if (title.offsetTop - event.target.scrollTop < 60) {
                    dispatch(selectCategory(Number(title.dataset.categoryId)));
                }
            });
    };
    useEffect(() => {
        dispatch(fetchCategories());
        dispatch(fetchProducts());
    }, [dispatch]);
    return (
        <div className="category-page">
            <div className="category-header">
                <h2>分类</h2>
            </div>
            <div className="category-content">
                <div className="category-left">
                    {categories.map((category) => (
                        <div
                            key={category.id}
                            className={
                                category.id === selectedCategoryId
                                    ? "category-item active"
                                    : "category-item"
                            }
                            onClick={() => handleCategoryClick(category.id)}
                        >
                            <span>{category.name}</span>
                        </div>
                    ))}
                </div>
                <div
                    className="category-right"
                    ref={rightScrollRef}
                    onScroll={handleRightScroll}
                >
                    {categories.map((category) => (
                        <div className="category-section" key={category.id}>
                            <div
                                className="category-section-title"
                                data-category-id={category.id}
                            >
                                {category.name}
                            </div>
                            <div className="category-list">
                                {allProducts
                                    .filter(
                                        (product) =>
                                            product.categoryId === category.id
                                    )
                                    .map((filteredProduct) => (
                                        <div
                                            className="category-list-item"
                                            key={filteredProduct.id}
                                            onClick={() =>
                                                navigate(
                                                    "/product/" +
                                                        filteredProduct.id
                                                )
                                            }
                                        >
                                            <Image
                                                src={filteredProduct.image}
                                                width={64}
                                                height={64}
                                                fit="cover"
                                                style={{ borderRadius: 32 }}
                                            />
                                            <p>{filteredProduct.name}</p>
                                            <p>
                                                价格: ¥{filteredProduct.price}
                                            </p>
                                        </div>
                                    ))}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}
